<template>
<div class="empty-state">
    <van-empty :image="image" :description="description" />
</div>
</template>

<script>
export default {
    name: 'EmptyState',
    props: {
        type: {
            type: String,
            default: 'default',
            validator: (value) => ['default', 'chat', 'like', 'comment', 'follow', 'system'].includes(value)
        },
        customImage: {
            type: String,
            default: ''
        },
        customDescription: {
            type: String,
            default: ''
        }
    },
    computed: {
        image() {
            if (this.customImage) return this.customImage

            const imageMap = {
                chat: 'search',
                like: 'like',
                comment: 'comment',
                follow: 'friends',
                system: 'bell',
                default: 'default'
            }

            return imageMap[this.type] || 'default'
        },
        description() {
            if (this.customDescription) return this.customDescription

            const descriptionMap = {
                chat: '暂无聊天消息',
                like: '暂无点赞消息',
                comment: '暂无评论消息',
                follow: '暂无关注消息',
                system: '暂无系统消息',
                default: '暂无数据'
            }

            return descriptionMap[this.type] || '暂无数据'
        }
    }
}
</script>

<style scoped>
.empty-state {
    padding: 40px 0;
    text-align: center;
}
</style>